<template>
  <n-config-provider id="body w-full" :theme-overrides="naiveTheme"
                     style="min-width: 1100px;"
  >
    <module-header name="app" value="/manage/role" is-telescreen />

    <main-content>
      <div class="mt-4 flex items-center">
        <div class="text-xl flex items-center w-1/3">
          角色管理
        </div>
        <div class="flex items-center justify-end w-2/3">
          <n-button type="primary" class="mr-4" @click="isShowCreateRoleList=true">新增角色</n-button>
        </div>
      </div>
      <n-data-table v-model:checked-row-keys="checkedRowKeys" v-model:data="data"
                    class="mt-4"
                    :columns="columns"
                    :pagination="pagination"
      />
      <n-form-modal v-model:show="isShowCreateRoleList" title="新增角色" :fields="createRoleList"
                    :on-confirm="onCreateRoleConfirm"
      />
      <n-form-modal v-model:show="isShowUpdateRoleList" title="修改角色" :fields="updateRoleList"
                    :on-confirm="onUpdateRoleConfirm"
      />
      <n-modal v-model:show="showDelModal"
               preset="dialog"
               title="确认"
               content="确认删除?"
               positive-text="确认"
               negative-text="算了"
               @positive-click="showDelModal = false"
               @negative-click="showDelModal = false"
      />
    </main-content>
  </n-config-provider>
</template>

<script lang="ts" setup>
import { ref, onMounted, h, reactive } from 'vue'
import { naiveTheme } from '../../shared/theme/naive_theme'
import { NConfigProvider, NButton, NDataTable, NModal } from 'naive-ui'
import type { DataTableColumns } from 'naive-ui'
import { nav } from '../../shared/client/window'
import { axiosReq } from '../../shared/client/axios'
import { actErr } from '../../shared/client/interact'
import ModuleHeader from '../../components/common/module_header.vue'
import MainContent from '../../components/common/main_content.vue'
import { reqGetAllRole } from './manage.def'
import NFormModal, { Item as FormModalItem } from '../../components/naive/n_form_modal.vue'

type RowData = {
  username: string,
  logName: string,
  position: string,
  department: string,
  key: number
}

const data = ref<RowData[]>([{
  username: 'string',
  logName: 'string',
  position: 'string',
  department: 'string',
  key: 0
}])

const pagination = {
  pageSize: 3
}

const checkedRowKeys = ref<Array<string | number>>([])

const buttons = [{ label:'修改',func:update }, { label:'删除',func:update }]

const columns: DataTableColumns<RowData> = [
  {
    type: 'selection',
    options: [
      'all',
      'none',
    ]
  },
  {
    title: '角色',
    key: 'role'
  },
  {
    title: '操作',
    key: 'operate',
    render (row) {
      return buttons.map((item, index) => (
        h(
          NButton,
          {
            size: 'small',
            key: index, // 添加唯一的 key，通常使用数组索引作为 key
            onClick: () => item.func(event,row)
          },
          { default: () => item.label },
        )
      ))
    }
  }
]

const showDelModal = ref(false)

//是否展示新增用户表单
const isShowCreateRoleList = ref(false)

//定义新增用户表单
const createRoleList: FormModalItem[] = [{
  title: '角色名',
  placeholder: '请输入',
  type: 'input',
  key: 'role'
}]
//确认提交新增用户表单
async function onCreateRoleConfirm(form: any) {
  console.log(form)
}


//是否展示更新用户表单
const isShowUpdateRoleList = ref(false)

//定义更新用户表单
const updateRoleList: FormModalItem[] = reactive([{
  title: '角色',
  placeholder: '请输入',
  type: 'input',
  key: 'role'
}])

//确认提交修改用户表单
async function onUpdateRoleConfirm(form: any) {
  console.log(form)
}

onMounted(async ()=>{

  const res = await reqGetAllRole(axiosReq)
  console.log(res)

  data.value = res.data.map(item => ({
    role: item.name,
    key: item.id
  }))

  console.log(data.value)

})

//更新角色信息
function update(event,data) {

  if (event.target.innerText === '修改') {
    updateRoleList[0].value = data.role
    isShowUpdateRoleList.value = true
  } else if(event.target.innerText === '删除') {
    showDelModal.value = true
  }
}
</script>

<style>
@import 'tailwindcss/base';
@import 'tailwindcss/components';
@import 'tailwindcss/utilities';
</style>
